<template>
  <a-card class="quota fixed z-50 bottom-0 right-0" :class="{ 'sider-breakpoint': siderBreakpoint }">
    <div class="quota-wrapper">
      <div
        style="margin-left: 300px; display: flex; margin-top: 5px; align-items: center"
        v-if="route.name === 'price-package-df'"
      >
        <h2
          style="color: red; font-weight: bold; font-size: 35px"
          v-if="props.comboPriceId && mainStore.userInfo?.proxy_id !== 1377 && mainStore.userInfo?.proxy_id !== 1407"
        >
          <!-- 季单显示 -->
          <span v-if="isQuarterly" class="jidan" style="display: inline-block">
            <span style="font-size: 36px; margin-top: 10px; white-space: nowrap">
              原价：<del>￥6800</del>，特惠价： ￥{{ currentPrice || mainStore.pricecibao }}
            </span>
          </span>

          <!-- 年单显示 -->
          <span v-else class="niandan" style="display: inline-block">
            <span style="font-size: 36px; margin-top: 10px; white-space: nowrap">
              原价：<del>￥{{ originalPrice }}</del
              >，特惠价：￥{{ currentPrice || 9800 }}
            </span>
          </span>
        </h2>

        <a-button
          type="primary"
          size="large"
          class="ml-5 quota__submit-btn"
          :danger="shouldDisabledSubmit"
          :loading="submitting"
          @click="handleBeforeSubmit"
        >
          提交
        </a-button>
      </div>
      <div style="margin-left: 500px" v-else>
        <span class="quota-desc">
          还可以添加
          <span class="quota-selected">{{ numOfAdditions }}</span>
          /{{ currentPackage?.wordsNumTotal ?? 0 }}个词语
        </span>
        <a-button
          type="primary"
          size="large"
          class="ml-5 quota__submit-btn"
          :danger="shouldDisabledSubmit"
          :loading="submitting"
          @click="handleBeforeSubmit"
        >
          {{ submitBtnText }}
        </a-button>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { computed, toRefs, watch } from 'vue'
import { isNil } from 'lodash-es'
import { message } from 'ant-design-vue'
import type { PackageData } from '@/services/price-sheet/getPackageList'
import type { PriceKeyword } from '@/core/interfaces/keyword'
import { useMainStore } from '@/store/useMainStore'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'

const mainStore = useMainStore()
// 获取对应的路由

const route = useRoute()

interface Emits {
  (e: 'submit'): void
  (e: 'before-submit'): void
}
// console.log(PackageData, 'PackageData');
//
interface Props {
  currentPackage: Partial<PackageData>
  selectedTableData: PriceKeyword[]
  submitting: boolean
  comboPriceId?: number // 添加时长ID
  comboPriceList?: any[] // 套餐价格列表
  platformIds?: string // 平台ID字符串，格式如 "1,2"
}
defineOptions({
  name: 'CbFooter'
})

const emit = defineEmits<Emits>()

// 现在你可以通过 mainStore 来访问 bansdsx
// console.log(mainStore.bansdsx); // 输出 bansdsx 的值
// const bansdsxs = ref(mainStore.bansdsx)
// // const code = localStorage.getItem('code')
// const { bansdsx } = mainStore

// 监听mainStore.bansdsx
// watch(
//   () => code.value,
//   (newValue, oldValue) => {
//     code.value = localStorage.getItem('code')
//   }
// )

const { siderBreakpoint } = storeToRefs(mainStore)

const props = withDefaults(defineProps<Props>(), {
  currentPackage: () => ({}),
  selectedTableData: () => [],
  submitting: false,
  comboPriceList: () => []
})
const { currentPackage, selectedTableData } = toRefs(props)

const isQuarterly = computed(() => {
  // 季单的comboPriceId为11，年单的comboPriceId为12
  return props.comboPriceId === 11
})

// 获取当前选中的套餐价格
const currentPrice = computed(() => {
  if (!props.comboPriceId || !props.comboPriceList || props.comboPriceList.length === 0) {
    return null
  }
  const priceItem = props.comboPriceList.find((item) => item.id === props.comboPriceId)
  return priceItem ? priceItem.price : null
})

// 计算选中的平台数量
const platformCount = computed(() => {
  if (!props.platformIds || props.platformIds === '') {
    return 1 // 默认至少1个平台
  }
  return props.platformIds.split(',').filter((id) => id.trim() !== '').length
})

// 计算原价（6980 * 平台数量）
const originalPrice = computed(() => {
  return 6980 * platformCount.value
})

const shouldDisabledSubmit = computed(() => {
  if (currentPackage.value?.wordsNumTotal) {
    return selectedTableData.value.length > currentPackage.value.wordsNumTotal
  }
  return false
})

const numOfAdditions = computed(() => {
  if (isNil(currentPackage.value?.wordsNumTotal)) {
    return selectedTableData.value.length
  } else {
    return currentPackage.value.wordsNumTotal - selectedTableData.value.length
  }
})

const submitBtnText = computed(() => {
  if (selectedTableData.value.length === 0) {
    return '请选择词组'
  } else if (currentPackage.value?.wordsNumTotal) {
    if (selectedTableData.value.length > currentPackage.value.wordsNumTotal) {
      return '当前套餐配额已用完'
    } else if (selectedTableData.value.length === currentPackage.value.wordsNumTotal) {
      return '您已经选好，可以提交审核了哦~'
    } else {
      return '提交审核'
    }
  } else {
    return '提交审核'
  }
})

async function handleBeforeSubmit() {
  // if (route.path !== '/price-package-wb') {
  //   if (selectedTableData.value.length === 0) {
  //     message.error(`请最少选择1个词`)
  //     return
  //   }
  // }
  // if (route.path === '/price-package-df' && selectedTableData.value.length !== currentPackage.value.wordsNumTotal) {
  //   message.error(`当前套餐请选择${currentPackage.value.wordsNumTotal}个词`)
  //   return
  // }
  if (route.path === '/price-package-wb') {
    if (selectedTableData.value.length !== currentPackage.value.wordsNumTotal) {
      message.error(`必须选满${currentPackage.value.wordsNumTotal}个词`)
      return
    }
  }
  emit('submit')
}
</script>

<style lang="scss" scoped>
.quota {
  height: 85px;
  left: 208px;
  padding-right: 38px;
  transition: left 0.2s ease;

  ::v-deep(.ant-card-body) {
    padding: 0;
  }

  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 5px;
  }

  &-desc {
    font-size: 16px;
  }

  &-selected {
    vertical-align: sub;
    font-size: 48px;
    font-weight: bold;
    color: #ff4d4f;
  }

  &__submit-btn {
    height: 56px;
    min-width: 134px;
    border-radius: 4px;
    font-size: 20px;
  }
}

.sider-breakpoint {
  left: 48px;
}
</style>
